<!--
  @Descripttion:用户中心-应聘反馈
  @Author：yejianbo
  @Date：2022年05月26日 12:35:40
-->
<template>
  <div class="feedback-page">
    <pageCom>
      <div class="content-page">
        <div class="nav-com">
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="margin-bottom: 20px"
          >
            <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name: 'userCenter' }">
              用户中心
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <span style="color: #3d6cb0">{{
                $route.meta.title || "--"
              }}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="content">
          <div class="content-title">
            应聘反馈
            <span class="tips-title">可打CALL，可吐槽！</span>
          </div>
          <div class="search-condition">
            <el-row>
              <el-col :span="12">
                <span class="condition-icon"></span>
                <el-select
                  style="width: 150px"
                  v-model="rangType"
                  placeholder="状态"
                  size="mini"
                >
                  <el-option label="全部" value="0"> </el-option>
                  <el-option label="未反馈" value="5"> </el-option>
                  <el-option label="已反馈" value="6"> </el-option>
                </el-select>
                <el-button
                  size="mini"
                  type="text"
                  style="margin-left: 15px"
                  @click="reset"
                  >重置</el-button
                >
              </el-col>
            </el-row>
          </div>
          <div class="list">
            <el-empty
              description="暂无相关反馈"
              v-if="dataList.length <= 0"
            ></el-empty>
            <div
              class="item"
              :key="index"
              @click.stop="openDialog(item.id, item.jobId)"
              v-for="(item, index) in dataList"
            >
              <div class="title">
                {{ item.jobName }}
                <span
                  >{{
                    item.curriculumVitaeSendRecordRespDTO.lowestSalary +
                    "-" +
                    item.curriculumVitaeSendRecordRespDTO.highestSalary
                  }}元/天</span
                >
              </div>
              <div class="row">
                <span class="local-icon" />
                <span class="city">{{
                  item.curriculumVitaeSendRecordRespDTO.city
                }}</span>
                <span class="small-text">{{
                  item.curriculumVitaeSendRecordRespDTO.workPeriod
                }}</span>
                <span class="line"></span>
                <span class="small-text"
                  >{{
                    item.curriculumVitaeSendRecordRespDTO.practicePeriod
                  }}个月</span
                >
              </div>
              <div class="row2">
                {{ item.companyName }} <span class="line"></span>
                {{ item.industry }}
              </div>
              <div class="date">
                <!-- 
                  简历状态（新），resumeStatus（投递过程的工单状态）
                  *  0 投递成功，企业未查看简历、
                  *  1 企业已查看投递记录、
                  *  2 已发送面试邀约、
                  *  3 学生已查看 、
                  *  4 已拒绝面试邀约、
                  *  5 已确认面试邀约、
                  *  6 学生已反馈，企业未反馈、
                  *  7 企业已反馈，学生未反馈、
                  *  8 都反馈，结束
                -->
                <span class="open">{{
                  [5, 7].indexOf(Number(item.status)) > -1
                    ? "点击反馈"
                    : "查看反馈内容"
                }}</span>
                投递日期：{{ item.inviteDate }}
              </div>
              <div
                class="tags green"
                v-if="[6, 8].indexOf(Number(item.status)) > -1"
              >
                已反馈
              </div>
              <!-- <div class="new-icon" v-show="item.inviteResultType == 5 || item.status == 7"></div> -->
            </div>
          </div>
          <el-pagination
            v-if="dataList.length > 0"
            class="bottom-page"
            background
            layout="prev, pager, next"
            :total="queryParams.total"
            :page-size="queryParams.pageSize"
            :page-sizes="[10, 20, 30, 40, 50]"
            @size-change="pagesizeHandle"
            @current-change="currentChange"
            :current-page="queryParams.pageNo"
          >
          </el-pagination>
        </div>
      </div>
      <CenterDialog ref="centerDialog" v-if="dialog" v-loading="loading">
        <template v-slot:left>
          <div class="left-item" v-if="!loading && currentJobStatus === 0">
            <div class="title">
              {{ jobInfo.jobName }}
              <span
                >{{
                  jobInfo.lowestSalary + "-" + jobInfo.highestSalary
                }}元/天</span
              >
            </div>
            <div class="row">
              <span class="local-icon" />
              <span class="city">{{ jobInfo.city }}</span>
              <span class="small-text">{{ jobInfo.workPeriod }}</span
              ><span class="line" /><span class="small-text"
                >{{ jobInfo.practicePeriod }}个月</span
              >
            </div>
            <div class="row2">
              {{ jobInfo.companyName }} <span class="line"></span>
              {{ jobInfo.industry }}
            </div>
            <div class="date">
              <span class="open" @click="linkTo(jobInfo.id)">查看职位详情</span>
              最近操作：{{ interInfo.inviteDate }}
            </div>
          </div>
        </template>
        <template v-slot:right v-if="!loading">
          <!-- 应聘反馈 -->
          <div class="right-detail">
            <div class="right-detailhead">
              应聘反馈 <span class="close-icon" @click="closeDialog">x</span>
            </div>
            <div class="right-detail-content">
              <div class="row">
                <div class="left">面试结果</div>
                <div class="right">
                  <p class="text">
                    <el-radio-group v-model="detailform.inviteResultType">
                      <el-radio
                        :label="item.value"
                        :disabled="
                          [6, 8].indexOf(Number(interInfo.status)) > -1 ||
                          currentJobStatus > 0
                        "
                        v-for="item in inviteResultType"
                        :key="item.value"
                        >{{ item.label }}</el-radio
                      >
                    </el-radio-group>
                    <!-- <el-checkbox-group >
                      <el-checkbox
                        :label="item.value"
                        :disabled="
                          [6, 8].indexOf(Number(interInfo.status)) > -1 ||
                          currentJobStatus > 0
                        "
                        v-for="item in inviteResultType"
                        :key="item.value"
                        >{{ item.label }}</el-checkbox
                      >
                    </el-checkbox-group> -->
                  </p>
                </div>
              </div>
              <div class="row">
                <div class="reject-reason">评价/原因</div>
              </div>
              <el-input
                style="
                  width: 100%;
                  font-size: 16px;
                  font-family: PingFangSC-Regular, PingFang SC;
                "
                :disabled="interInfo.status == '6' || currentJobStatus > 0"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 8 }"
                placeholder="请输入内容"
                v-model="feedback"
              >
              </el-input>
              <div class="btn-box">
                <!-- 简历状态（新），resumeStatus（投递过程的工单状态）
                *  0 投递成功，企业未查看简历、
                *  1 企业已查看投递记录、
                *  2 已发送面试邀约、
                *  3 学生已查看 、
                *  4 已拒绝面试邀约、
                *  5 已确认面试邀约、
                *  6 学生已反馈，企业未反馈、
                *  7 企业已反馈，学生未反馈、
                *  8 都反馈，结束
                -->
                <div
                  class="btn confirm"
                  @click="submit"
                  v-if="
                    [5, 7].indexOf(Number(interInfo.status)) > -1 &&
                    currentJobStatus === 0
                  "
                >
                  提交
                </div>
              </div>
              <div
                class="feedback-confirm-tips red"
                v-if="currentJobStatus > 0"
              >
                职位停止招聘
              </div>
              <div
                class="feedback-confirm-tips"
                v-else-if="
                  Number(interInfo.status) === 6 ||
                  Number(interInfo.status) === 8
                "
              >
                已反馈
              </div>
            </div>
          </div>
        </template>
      </CenterDialog>
      <div class="mobile-feedback">
        <div class="status-select">
          <van-dropdown-menu>
            <van-dropdown-item v-model="rangType" :options="statusOptions" />
            <img
              class="dropdown-icon"
              src="../../assets/images/user/downdrop.png"
              alt=""
            />
          </van-dropdown-menu>
        </div>
        <div class="feedback-tips">
          为提供更好更多的优质招聘内容，请各位同学积极反馈面试情况~
          您的满意是我们最大的动力~
        </div>
        <div class="feedback-list">
          <van-empty
            class="custom-image"
            image="https://img.yzcdn.cn/vant/custom-empty-image.png"
            description="暂无数据"
            v-if="dataList.length <= 0"
          />
          <div
            class="list-item"
            :key="index"
            @click.stop="openDialog(item.id, item.jobId)"
            v-for="(item, index) in dataList"
          >
            <div class="title">
              <span class="title-name">{{ item.jobName }}</span>
              <span class="salary"
                >{{
                  item.curriculumVitaeSendRecordRespDTO.lowestSalary +
                  "-" +
                  item.curriculumVitaeSendRecordRespDTO.highestSalary
                }}元/天</span
              >
            </div>
            <div class="row">
              <span class="local-icon" />
              <span class="city">{{
                item.curriculumVitaeSendRecordRespDTO.city
              }}</span>
              <span class="small-text">{{
                item.curriculumVitaeSendRecordRespDTO.workPeriod
              }}</span>
              <span class="line"></span>
              <span class="small-text"
                >{{
                  item.curriculumVitaeSendRecordRespDTO.practicePeriod
                }}个月</span
              >
            </div>
            <div class="row2">
              {{ item.companyName }}
              <span class="line" v-if="item.industry"></span>
              {{ item.industry }}
            </div>
            <div class="date">
              <span class="visit-date">面试日期：{{ item.inviteDate }}</span>
              <!-- 
                简历状态（新），resumeStatus（投递过程的工单状态）
                *  0 投递成功，企业未查看简历、
                *  1 企业已查看投递记录、
                *  2 已发送面试邀约、
                *  3 学生已查看 、
                *  4 已拒绝面试邀约、
                *  5 已确认面试邀约、
                *  6 学生已反馈，企业未反馈、
                *  7 企业已反馈，学生未反馈、
                *  8 都反馈，结束
              -->
              <span class="open">{{
                [5, 7].indexOf(Number(item.status)) > -1
                  ? "点击反馈"
                  : "查看反馈内容"
              }}</span>
            </div>
            <div
              class="tags green"
              v-if="[6, 8].indexOf(Number(item.status)) > -1"
            >
              <img src="../../assets/images/user/isFeedback.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </pageCom>
  </div>
</template>

<script>
import Vue from "vue";
import pageCom from "@/components/page/index.vue";
import {
  provinceAndCityData,
  inviteWay,
  attentionEvent,
  inviteResultType,
} from "@/utils/frontDataDict.js";
import CenterDialog from "./components/centerDialog.vue";
import {
  getInviteInfo,
  getInvitedFeedback,
  getJobInfo,
  updateInvite,
  isJob,
} from "../../request/api";
import { getWorkPeriodName } from "../../utils/frontDataDict";
import { formatTime } from "../../utils/utils";
import { DropdownMenu, DropdownItem } from "vant";
import { Empty } from "vant";
Vue.use(Empty);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
export default {
  // 组件名称
  name: "userCenter",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { pageCom, CenterDialog },
  // 组件状态值
  data() {
    return {
      inviteResultType: inviteResultType,
      activeType: 4,
      attentionEvent: attentionEvent,
      detailform: {
        inviteWay: ["0"],
        noticeItem: [],
        inviteResultType: [],
        reasonText: "",
      },
      feedback: "",
      jobInfo: {},
      interInfo: {},
      loading: true,
      dataList: [],
      rangType: "0",
      inviteWay: inviteWay,
      dialog: false,
      provinceAndCityData: provinceAndCityData,
      queryParams: {
        city: "", // 城市
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      studentId: null,
      currentJobStatus: 0, // 0 发布 1 暂停发布 2 删除
      statusOptions: [
        { text: "全部", value: "0" },
        { text: "未反馈", value: "5" },
        { text: "已反馈", value: "6" },
      ],
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  watch: {
    rangType: function (newValue, oldValue) {
      this.init();
    },
  },
  // 组件方法
  methods: {
    currentChange(e) {
      this.queryParams.pageNo = Number(e);
      this.init();
    },
    pagesizeHandle(val) {
      this.queryParams.pageSize = Number(val);
      this.init();
    },
    closeDialog() {
      this.dialog = false;
    },
    linkTo(id) {
      localStorage.setItem("currentJobId", id);
      this.$router.push({
        path: `/jobDetail/${id}`,
      });
    },
    /**
     * 简历状态（新），resumeStatus（投递过程的工单状态）
     *  0 投递成功，企业未查看简历、
     *  1 企业已查看投递记录、
     *  2 已发送面试邀约、
     *  3 学生已查看 、
     *  4 已拒绝面试邀约、
     *  5 已确认面试邀约、
     *  6 学生已反馈，企业未反馈、
     *  7 企业已反馈，学生未反馈、
     *  8 都反馈，结束
     */
    submit() {
      if (this.detailform.inviteResultType.length === 0) {
        this.$message.error("请选择面试结果");
        return;
      }
      if (!this.feedback) {
        this.$message.error("请输入评价/原因");
        return;
      }
      let { evaluation, status } = this.interInfo;
      if (evaluation === "" || evaluation === null) {
        status = 6;
      } else {
        status = 8;
      }
      let inviteResultType = JSON.stringify(this.detailform.inviteResultType);
      let parmas = {
        feedback: this.feedback,
        status: "" + status,
        sendRecordId: this.interInfo.sendRecordId,
        id: this.interInfo.id,
        companyId: this.jobInfo.companyId,
        jobId: this.jobInfo.id,
        studentId: this.interInfo.studentId,
        userId: this.interInfo.studentId,
        inviteResultType,
      };
      console.log("parmas>>>", parmas);
      updateInvite(parmas).then((res) => {
        if (res.data) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.closeDialog();
          this.init();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    openDialog(id, jobId) {
      const clientW = document.body.clientWidth;
      if (clientW > 768) {
        isJob({ id: jobId }).then((res) => {
          if (res.code === 0 && res.data) {
            /**
             * 职位状态 0 发布 1 暂停发布 2 删除
             */
            this.currentJobStatus = Number(res.data);
            getInviteInfo({ id })
              .then((res) => {
                if (res.data) {
                  res.data.inviteDate &&
                    (res.data.inviteDate = formatTime(
                      new Date(res.data.inviteDate)
                    ));
                  try {
                    if (res.data.inviteResultType) {
                      this.detailform.inviteResultType =
                        JSON.parse(res.data.inviteResultType) || [];
                    }
                  } catch {
                    () => {};
                  }
                  this.interInfo = res.data;
                  (this.feedback = res.data.feedback),
                    getJobInfo({ id: res.data.jobId })
                      .then((vv) => {
                        this.loading = false;
                        if (vv.data) {
                          try {
                            if (Array.isArray(JSON.parse(vv.data.industry))) {
                              vv.data.industry = JSON.parse(vv.data.industry)[1];
                            }
                            if (Array.isArray(JSON.parse(vv.data.city))) {
                              vv.data.city = JSON.parse(vv.data.city)[1];
                            }
                          } catch {
                            () => {};
                          }
                          vv.data.workPeriod &&
                            (vv.data.workPeriod = getWorkPeriodName(
                              vv.data.workPeriod
                            ));
                          this.jobInfo = vv.data;
                        }
                      })
                      .catch((err) => {
                        this.loading = false;
                      });
                } else {
                  this.loading = false;
                }
              })
              .catch((err) => {
                this.loading = false;
              });
            this.dialog = true;
          }
        });
      } else {
        this.$router.push({ name: "feedbackDetails", query: { id, jobId }});
      }
      
    },
    // 重置
    reset() {
      this.rangType = "0";
      this.init();
    },
    rangTypeChange(e) {},
    init() {
      let studentId = localStorage.getItem("userId");
      if (studentId) {
        this.studentId = Number(studentId);
      }
      let params = {
        pageNo: this.queryParams.pageNo,
        pageSize: this.queryParams.pageSize,
        status: this.rangType != "0" ? this.rangType : "",
        studentId: this.studentId,
      };
      for (const key in params) {
        if (params[key] === null || params[key] === "") {
          delete params[key];
        }
      }
      getInvitedFeedback(params).then((res) => {
        if (res.data) {
          let list = res.data.list;
          list.forEach((v) => {
            try {
              if (Array.isArray(JSON.parse(v.industry))) {
                v.industry = JSON.parse(v.industry)[1];
              }
            } catch {
              () => {};
            }
            try {
              // 所属城市
              let city = JSON.parse(v.curriculumVitaeSendRecordRespDTO.city);
              if (Array.isArray(city)) {
                v.curriculumVitaeSendRecordRespDTO.city = city[city.length - 1];
              }
            } catch (error) {
              v.curriculumVitaeSendRecordRespDTO.city = "--";
            }
            v.curriculumVitaeSendRecordRespDTO.workPeriod &&
              (v.curriculumVitaeSendRecordRespDTO.workPeriod =
                getWorkPeriodName(
                  v.curriculumVitaeSendRecordRespDTO.workPeriod
                ));
            v.inviteDate && (v.inviteDate = formatTime(new Date(v.inviteDate)));
          });
          this.dataList = list;
          this.queryParams.total = res.data.total;
        }
      });
    },
  },
};
</script>
<style lang="less">
@media (max-width: 768px) {
  .feedback-page {
    .content-page {
      display: none;
    }
  }
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.center-dialog {
  position: fixed !important;
}
.content-page {
  position: relative;
  width: 100%;
  height: 100%;
  .bannber {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 25px;
  }
  .content {
    position: relative;
    width: 100%;
    min-width: 1000px;
    margin: 0 auto;
    .content-title {
      font-size: 28px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #37383d;
      line-height: 40px;
      margin-bottom: 15px;
      .tips-title {
        display: inline-block;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #2f8efe;
        border-radius: 21px;
        border: 1px solid rgba(47, 142, 254, 0.4);
        height: 28px;
        line-height: 28px;
        margin-left: 10px;
        padding: 0 10px;
        vertical-align: middle;
      }
    }
    .search-condition {
      .tips-text {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383d;
        line-height: 28px;
        margin-right: 12px;
      }
      .condition-icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url("../../assets/images/search-icon.png") no-repeat center
          center / cover;
        vertical-align: middle;
        margin-right: 13px;
      }
    }
  }
  .list {
    position: relative;
    width: 100%;
    overflow: hidden;
    .item {
      position: relative;
      width: calc((100% - 50px) / 3);
      float: left;
      margin: 20px 25px 0px 0;
      border-radius: 9px;
      background: url("../../assets/images/user/deliver-bg.png") no-repeat top
        center / cover;
      padding: 30px 18px 25px;
      border: 1px solid #d4d6da;
      cursor: pointer;
      overflow: hidden;

      .tags {
        position: absolute;
        width: 138px;
        height: 48px;
        background: transparent;
        border: 1px solid #fc9c21;
        display: flex;
        justify-content: center;
        border-radius: 4px;
        align-items: center;
        color: #fc9c21;
        font-weight: 600;
        font-size: 20px;
        bottom: 90px;
        right: 25px;
        transform: rotateZ(-30deg);
        z-index: 2;
        &.green {
          border-color: #6fc70f;
          color: #6fc70f;
        }
      }
      &:nth-child(3n) {
        margin: 20px 0px 0px 0;
      }
      .title {
        font-size: 22px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 40px;
        position: relative;
        padding-right: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        > span {
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 30px;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .row {
        position: relative;
        line-height: 30px;
        margin-bottom: 15px;
        .local-icon {
          display: inline-block;
          width: 20px;
          height: 24px;
          background: url("../../assets/images/user/local.png") no-repeat center
            center / cover;
          margin-right: 12px;
          vertical-align: middle;
        }
        .city {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 20px;
          margin-right: 15px;
        }
        .small-text {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 20px;
        }
        .line {
          display: inline-block;
          width: 1px;
          height: 14px;
          background: #9597a0;
          margin: 0 10px;
        }
      }
      .row2 {
        position: relative;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 20px;
        margin-bottom: 10px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        .line {
          display: inline-block;
          width: 1px;
          height: 14px;
          background: #9597a0;
          margin: 0 10px;
        }
      }
      .date {
        line-height: 20px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #c4c4c4;
        text-align: left;
        letter-spacing: 0;
        .open {
          float: right;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2f8efe;
          line-height: 20px;
        }
      }
      .status-tips {
        position: absolute;
        right: 45px;
        bottom: 30%;
        border-radius: 4px;
        border: 2px solid #6fc70f;
        font-size: 26px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #6fc70f;
        line-height: 50px;
        padding: 0 18px;
        transform: rotateZ(-35deg);
        z-index: 1;
      }
      .new-icon {
        position: absolute;
        left: 0;
        top: 0;
        width: calc(100vw * 60 / 1920);
        height: calc(100vw * 28 / 1920);
        background: url("../../assets/images/news.png") no-repeat center center /
          cover;
      }
      &:hover {
        box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
        .title {
          color: #2f8efe;
        }
      }
    }
  }
}

.left-item {
  position: relative;
  width: 340px;
  border-radius: 5px;
  // background: url("../../assets/images/user/deliver-bg.png") no-repeat top
  //   center / cover;
  background: #fff;
  padding: 27px 16px 16px;
  border: 1px solid #d4d6da;
  border-top: 13px solid #4677b9;
  cursor: pointer;
  overflow: hidden;

  &:nth-child(3n) {
    margin: 30px 0px 0px 0;
  }

  .title {
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #37383d;
    line-height: 28px;
    margin-bottom: 22px;

    > span {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 20px;
      margin-left: 15px;
    }
  }

  .row {
    line-height: 20px;
    margin-bottom: 16px;

    .local-icon {
      display: inline-block;
      width: 13px;
      height: 16px;
      background: url("../../assets/images/user/local.png") no-repeat center
        center / cover;
      margin-right: 2px;
    }

    .city {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383d;
      line-height: 20px;
      margin-right: 12px;
    }

    .small-text {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 20px;
    }

    .line {
      display: inline-block;
      width: 1px;
      height: 10px;
      background: #9597a0;
      margin: 0 13px;
    }
  }

  .row2 {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9597a0;
    line-height: 20px;
    margin-bottom: 22px;

    .line {
      display: inline-block;
      width: 1px;
      height: 10px;
      background: #9597a0;
      margin: 0 16px;
    }
  }

  .date {
    line-height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #c4c4c4;
    text-align: right;

    .open {
      float: left;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2f8efe;
      line-height: 20px;
    }
  }

  .feedback-tips {
    position: absolute;
    right: 10%;
    bottom: 30%;
    border-radius: 4px;
    border: 1px solid #6fc70f;
    font-size: 26px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #6fc70f;
    line-height: 37px;
    padding: 0 18px;
    transform: rotateZ(-35deg);
  }
}
.right-detail {
  position: relative;
  width: 606px;
  background: #ffffff;
  .right-detailhead {
    position: relative;
    border-bottom: 1px solid #d4d6da;
    line-height: 56px;
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #37383d;
    padding-left: 16px;
    .close-icon {
      position: absolute;
      width: 22px;
      height: 22px;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      line-height: 22px;
      display: block;
      align-items: center;
      justify-content: space-between;
      color: #b0b0b0;
      font-size: 14px;
      text-align: center;
      cursor: pointer;
    }
  }
  .right-detail-content {
    position: relative;
    width: 100%;
    padding: 25px 30px 40px;

    .title {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383d;
      line-height: 22px;
      margin-bottom: 17px;
    }
    .row {
      position: relative;
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      margin-bottom: 18px;
      .left {
        width: 80px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 22px;
        text-align: left;
        margin-right: 27px;
      }
      .reject-reason {
        width: 100%;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 22px;
        text-align: left;
        margin-right: 27px;

        span {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #c4c4c4;
          line-height: 20px;
        }
      }
      .right {
        flex: 1;
        overflow: hidden;
        line-height: 22px;

        .text {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 22px;
        }

        .address {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 22px;
          .position-icon {
            position: relative;
            display: inline-block;
            top: 2px;
            width: 16px;
            height: 19px;
            margin-right: 8px;
            background: url("../../assets/images/position.png") no-repeat center
              center / cover;
            // vertical-align: middle;
          }
        }
      }
    }
    .btn-box {
      position: relative;
      margin-top: 36px;
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;

      .btn {
        width: 168px;
        height: 45px;
        border-radius: 4px;
        border: 1px solid #4677b9;
        text-align: center;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #4677b9;
        cursor: pointer;
      }

      .confirm {
        background-color: #4677b9;
        color: #fff;
      }
    }
    .feedback-tips {
      position: absolute;
      right: 45px;
      top: 20%;
      border-radius: 4px;
      border: 2px solid #6fc70f;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #6fc70f;
      line-height: 50px;
      padding: 0 18px;
      transform: rotateZ(-35deg);
      z-index: 1;
    }
    .reject-tips {
      position: absolute;
      right: 45px;
      top: 20%;
      border-radius: 4px;
      border: 2px solid rgb(180, 52, 29);
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: rgb(180, 52, 29);
      line-height: 50px;
      padding: 0 18px;
      transform: rotateZ(-35deg);
      z-index: 1;
    }
    .feedback-confirm-tips {
      position: absolute;
      right: 45px;
      bottom: 20%;
      border-radius: 4px;
      border: 2px solid #6fc70f;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #6fc70f;
      line-height: 44px;
      padding: 0 25px;
      transform: rotateZ(-35deg);
      z-index: 1;
    }
    .feedback-confirm-tips.red {
      color: #fe4e3d;
      border: 1px solid #fe4e3d;
    }
    .success-icon {
      display: block;
      width: 80px;
      height: 80px;
      margin: 20px auto;
    }
    .succes-tips {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #37383d;
      line-height: 24px;
      margin-bottom: 20px;
      text-align: center;
    }
    .safe-icon {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #fc9c21;
      line-height: 22px;
      text-align: center;
      margin-bottom: 10px;
    }
    .safe-tips {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #c4c4c4;
      line-height: 17px;
    }
  }
}
.bottom-page {
  margin-top: 50px;
  text-align: center;
}
/deep/ .el-breadcrumb__inner {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #37383d;
  line-height: 28px;
  cursor: pointer;
}
#app .el-pagination.is-background .el-pager li:not(.disabled).active {
  width: 32px !important;
  height: 32px !important;
}
/deep/ .el-button--text {
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #3d6cb0;
  line-height: 21px;
}
@media (min-width: 769px) {
  .mobile-feedback {
    display: none;
  }
}
@media (max-width: 768px) {
  .mobile-feedback {
    padding: 0.75rem 0 0.2rem;
  }
  .status-select {
    width: 100%;
    height: 0.45rem;
    position: fixed;
    border-bottom: 1px solid #e6e6e6;
    top: 0.54rem;
    left: 0;
    background: #ffffff;
    z-index: 999;
    .dropdown-icon {
      width: 0.13rem;
      height: 0.08rem;
      position: absolute;
      right: 1.4rem;
      top: 0.18rem;
    }
  }
  .feedback-tips {
    position: fixed;
    top: 0.99rem;
    left: 0;
    font-size: 0.12rem;
    color: #ffffff;
    line-height: 0.17rem;
    background-color: #2f8efe;
    padding: 0.05rem 0.1rem;
    z-index: 1;
  }
  .line {
    display: inline-block;
    width: 1px;
    height: 0.1rem;
    background: #9597a0;
    margin: 0 0.15rem;
  }
  .feedback-list {
    .list-item {
      margin-top: 0.1rem;
      border-left: 1px solid #d4d6da;
      border-right: 1px solid #d4d6da;
      border-top: 0.1rem solid #4677b9;
      border-bottom: 1px solid #d4d6da;
      border-radius: 0.05rem;
      padding: 0.12rem 0.12rem 0.16rem;
      font-size: 0.13rem;
      color: #9597a0;
      position: relative;
      .title {
        display: flex;
        height: 0.28rem;
        align-items: center;
        font-size: 0.2rem;
        font-weight: 500;
        color: #37383d;
        .title-name {
          flex: 1;
        }
        .salary {
          font-size: 0.13rem;
          color: #9597a0;
        }
      }
      .row {
        display: flex;
        height: 0.18rem;
        align-items: center;
        margin: 0.1rem 0;
        .local-icon {
          width: 0.13rem;
          height: 0.16rem;
          background: url("../../assets/images/position.png") no-repeat center
            center / cover;
        }
        .city {
          font-size: 0.13rem;
          color: #37383d;
          margin: 0 0.16rem 0 0.07rem;
        }
      }
      .row2 {
        height: 0.18rem;
        line-height: 0.18rem;
        margin-bottom: 0.12rem;
      }
      .date {
        display: flex;
        height: 0.18rem;
        line-height: 0.18rem;
        .visit-date {
          flex: 1;
          font-size: 0.12rem;
          color: #c4c4c4;
        }
        .open {
          color: #2f8efe;
        }
      }
      .tags {
        width: 1.08rem;
        height: 0.69rem;
        position: absolute;
        right: 0.21rem;
        bottom: 0.15rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  /deep/ .van-dropdown-menu__bar {
    height: 0.45rem;
    background: none;
    box-shadow: none;
  }
  /deep/ .van-dropdown-menu__title::after {
    content: none;
  }
  // .van-dropdown-item__option--active
  /deep/ .van-dropdown-menu__title--active {
    color: #2f8efe;
  }
  /deep/ .van-dropdown-item__option--active {
    color: #2f8efe;
  }
  /deep/ .van-dropdown-item__option--active .van-dropdown-item__icon {
    color: #2f8efe;
  }
}
</style>
